<template>
<div class="main">
    <div class="pos">
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">在线用户</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{user}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">在线设备</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{device}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">CPU利用率</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{cpu}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">内存利用率</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{memory}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">设备序列号</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{serial}}</div>
            </el-col>
        </el-row>
    </div>
    <!-- <h1 style="position: absolute; bottom: 3%; right: 5%;"> 10511工作室&nbsp;版权所有</h1> -->
</div>
</template>

<script>
//引入mapState
import {
    mapState
} from 'vuex'
export default {
     data() {
        return {
            form:''
        }
    },
    methods: {
        getsysteminfo() {
            this.$store.dispatch('GET_SYSTEMHOME');
        },
    },
    mounted: function () {
        this.getsysteminfo();
        this.form = JSON.parse(JSON.stringify(this.$store.state.systemhome));
    },
    computed: mapState({ //步骤二,对象方式
        user: state => state.systemhome.user,
        device: state => state.systemhome.device,
        cpu: state => state.systemhome.cpu,
        memory: state => state.systemhome.memory,
        serial: state => state.systemhome.serial,
        
    })
}
</script>

<style scoped>
.main {
    display: block;
    height: 590px;
    width: 100%;
}

.pos {
    margin-left: 10%;
    display: block;
    position: absolute;
    width: 800px;
    margin-top: 60px;
}

.el-row {
    margin-left: 25%;
    height: 80px;
}

.el-col {
    text-align: center;
    width: 200px;
    height: 80px;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}
</style>
